<template>
  <div style="width: 100%;height: 100%;position: relative">
    <div class="btntoggle">
      <span @click="chart1Click" :class="{ 'active': state.chart1Visible}">用电量</span>
      <span @click="chart2Click" :class="{ 'active': state.chart2Visible}">天然气</span>
    </div>
    <div ref="chartContainerright2" style="padding: 5px;width: 100%;height: 100%"></div>
  </div>
  <el-dialog :title="state.popupTitle" v-model="state.popVisible" :close-on-click-modal="false" width="780px">
    <table class="mytable">
      <tr>
        <th style="width: 20%">日期</th>
        <th>产量</th>
      </tr>
      <tr>
        <td>2024-04-01</td>
        <td>111吨</td>
      </tr>
      <tr>
        <td>2024-04-02</td>
        <td>145吨</td>
      </tr>
      <tr>
        <td>2024-04-03</td>
        <td>155.6吨</td>
      </tr>
      <tr>
        <td>2024-04-04</td>
        <td>113.8吨</td>
      </tr>
      <tr>
        <td>2024-04-05</td>
        <td>132.2吨</td>
      </tr>
      <tr>
        <td>2024-04-06</td>
        <td>125.2吨</td>
      </tr>
      <tr>
        <td>2024-04-07</td>
        <td>113.2吨</td>
      </tr>
    </table>
  </el-dialog>
</template>

<script setup name="pcleft1">
import {reactive, ref, onMounted, defineProps, defineEmits, nextTick} from "vue";
import * as echarts from 'echarts';
const state = reactive({
  chart1Visible:true,
  chart2Visible:false,
})

const chartContainerright2 = ref(null);
const createCharts_1 = ()=>{
  const chartInstance = echarts.init(chartContainerright2.value);
  const option = {
    // ECharts 配置项
    title: {
      text: '2024年3月耗电量',
      left:'10px',
      textStyle:{
        color:'#ffffff',
        fontSize:'16px',
        textAlign:'right'
      }
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      },
      formatter: '{b0}: {c0}万度',
    },
    grid: {
      left: '16px',
      top:'16px',
      right: '16px',
      bottom: '2%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: ['风能装备', '核能装备', '海工装备', '调质钢', '传动装备', '耐磨介质', '核海新材料'],
      axisLine: {   //x轴的样式
        show: false,
        lineStyle: {
          color: "#ffffff",
          width: 1,
          type: "solid"
        },
      },
      axisTick: {
        show: false,
      },
      axisLabel:  {
        interval: 0,
        // rotate:50,
        show: true,
        splitNumber: 15,
        textStyle: {
          color: "#ffffff",
          fontSize: '12',
        },
      },
    },
    yAxis: {
      type: 'value',
      axisLine: {   //y轴的样式
        show: false,
        lineStyle: {
          color: "rgba(255,255,255,.1	)",
          width: 1,
          type: "solid"
        },
      },
      axisLabel: {
        show:false,
        formatter: '{value}万度',
        textStyle: {
          color: "#ffffff",
          fontSize: '12',
        },
      },
      axisTick: {
        show: false,
      },
      splitLine: {
        lineStyle: {
          color: "rgba(255,255,255,.1)",
        }
      }
    },
    series: [{
      name: '耗电量',
      type: 'bar',
      barWidth:'45%', //柱子宽度
      itemStyle: {
        normal: {
          //color:'#2f89cf',
          color:'#f1c104',
          opacity: 1,
          barBorderRadius: 5,
        }
      },
      label: {
        show: true, // 显示数值
        color:"#ffffff",
        formatter:'{c}万度',
        position: 'top' // 在顶部显示
      },
      data: [3121, 2891, 2132, 1896, 2526, 2022, 1981]
    }]
  };
  chartInstance.setOption(option);
}

const createCharts_2 = ()=>{
  const chartInstance = echarts.init(chartContainerright2.value);
  const option = {
    // ECharts 配置项
    title: {
      text: '2024年3月耗气量',
      left:'10px',
      textStyle:{
        color:'#ffffff',
        fontSize:'16px',
        textAlign:'right'
      }
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      },
      formatter: '{b0}: {c0}万方',
    },
    grid: {
      left: '16px',
      top:'16px',
      right: '16px',
      bottom: '2%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: ['风能装备', '核能装备', '海工装备', '调质钢', '传动装备', '耐磨介质', '核海新材料'],
      axisLine: {   //x轴的样式
        show: false,
        lineStyle: {
          color: "#ffffff",
          width: 1,
          type: "solid"
        },
      },
      axisTick: {
        show: false,
      },
      axisLabel:  {
        interval: 0,
        // rotate:50,
        show: true,
        splitNumber: 15,
        textStyle: {
          color: "#ffffff",
          fontSize: '12',
        },
      },
    },
    yAxis: {
      type: 'value',
      axisLine: {   //y轴的样式
        show: false,
        lineStyle: {
          color: "rgba(255,255,255,.1	)",
          width: 1,
          type: "solid"
        },
      },
      axisLabel: {
        show:false,
        formatter: '{value}万方',
        textStyle: {
          color: "#ffffff",
          fontSize: '12',
        },
      },
      axisTick: {
        show: false,
      },
      splitLine: {
        lineStyle: {
          color: "rgba(255,255,255,.1)",
        }
      }
    },
    series: [{
      name: '耗电量',
      type: 'bar',
      barWidth:'45%', //柱子宽度
      itemStyle: {
        normal: {
          //color:'#2f89cf',
          color:'#0e6ade',
          opacity: 1,
          barBorderRadius: 5,
        }
      },
      label: {
        show: true, // 显示数值
        color:"#ffffff",
        formatter:'{c}万方',
        position: 'top' // 在顶部显示
      },
      data: [1121, 891, 1132, 833, 1526, 1022, 1581]
    }]
  };
  chartInstance.setOption(option);
}

const chart1Click = ()=>{
  if(!state.chart1Visible){
    state.chart1Visible=true
    state.chart2Visible=false
    createCharts_1();
  }
}
const chart2Click = ()=>{
  if(!state.chart2Visible){
    state.chart2Visible=true
    state.chart1Visible=false
    createCharts_2();
  }
}
onMounted(()=>{
  createCharts_1();
})
</script>

<style scoped lang="scss">
.btntoggle{
  position: absolute;
  z-index: 1000000;
  top:5px;
  right: 15px;
  span{
    display: inline-block;
    width: 80px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    border: 1px solid #ffffff;
    color: #ffffff;
  }
  span.active{
    color: #f1c104;
    background-color: #32a99e;
  }
}
</style>
